<script lang="ts" setup>
import { computed, onMounted, ref, reactive, watchEffect } from "vue";
import { getProListApi, getProTypeApi,getProListByTypeApi } from "@/api/pro";

// 一、分页相关逻辑
// 每页的条数
let pageCount = ref(10);
// 当前页码
let pageIndex = ref(1);

let total = ref(0);

//二、产品相关业务
interface protype {
  "banners": Array<string>,
  "proid": string,
  "category": string,
  "brand": string,
  "proname": string,
  "originprice": number,
  "sales": number,
  "stock": number,
  "desc": string,
  "issale": number,
  "isrecommend": number,
  "discount": number,
  "isseckill": number,
  "img1": string,
  "img2": string,
  "img3": string,
  "img4": string
}

let proList = reactive<Array<protype>>([]);
console.log("proList", proList);

function getProList(count: number = 1, limitNum: number = 10) {
  getProListApi({ count, limitNum })
    .then((res: any) => {
      if (res.code === "200") {
        proList.splice(0, 10, ...(res.data as Array<protype>));
        total.value = res.total;
      }
    })
}
// 获取数据：
onMounted(() => {
  getProList();
})

watchEffect(() => {
  // debugger;
  // 当页码发生变化时，重新请求数据
  console.log("watchEffect.pageIndex.value", pageIndex.value);
  getProList(pageIndex.value);
})


// 三、筛选产品
// 1、查询条件：产品类型
const proType = ref("");
const search = ref("");

// 2、查询所有的产品类型
const options = reactive([]);

interface IData {
  code: string,
  data: [],

}
getProTypeApi()
  .then((res) => {
    if (res.code === "200") {
      // console.log("options:res.data",res.data);    
      //  options.splice(0,options.length,...(res.data as Array<string>));
      if (res.data) {
        options.splice(0, options.length, ...(res.data as Array<string>));
      }
    }
  })


  // 监听商品类型的变化：查询新的数据
  watchEffect(()=>{
    getProListByTypeApi({
      category:proType.value,
      search:search.value
    })
    .then(res=>{
      if(res.code==="200"){
        console.log("筛选出来的数据:res.data",res.data);
        
        proList.splice(0,proList.length,...res.data);
      }
    })
  })

</script>
<template>
  <div class="about">
    <h1>产品页面</h1>
    产品类别：<el-select v-model="proType" clearable placeholder="Select">
      <el-option v-for="item in options" :key="item" :label="item" :value="item" />
    </el-select>
    搜索关键字：<el-input
      v-model="search"
      class="w-50 m-2"
      size="large"
      placeholder="请输入关键字"
    />
    <hr style="height:10px;" />
    <el-table :data="proList" style="width: 100%">
      <el-table-column fixed prop="proid" label="产品编号" width="150" />
      <el-table-column prop="category" label="分类" width="120" />
      <el-table-column prop="brand" label="品牌" width="120" />
      <el-table-column prop="proname" label="名称" width="320" />
      <el-table-column prop="originprice" label="价格" width="120" />
      <el-table-column prop="sales" label="销量" width="120" />
      <el-table-column prop="stock" label="库存" width="120" />

      <el-table-column label="是否推荐" width="120">
        <template #default="scope">
          <el-switch v-model="scope.row.isrecommend"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="是否秒杀" width="120">
        <template #default="scope">
          <el-switch v-model="scope.row.isseckill"></el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template #default>
          <el-button>修改</el-button>
          <el-button>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="pageIndex" :page-size="pageCount" background layout="prev, pager, next"
      :total="total" />
  </div>
</template>

<style scoped>

</style>
